<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"/>
    <title>装备对比列表</title>
    <link rel="stylesheet" href="/static/css/show/gearmore.css"/>
    <link rel="stylesheet" href="/static/toastr/toastr.min.css"/>
</head>
<body style="background:#f5f7fa;">

{if $gearInfos}
<!--contianer-->
<section class="det-container">
    <input type="hidden" id="gids" />
    <!--comments-->
    <section class="det-comment det-evaluate more-comm" style="padding-bottom:0;">
        {loop $gearInfos $k $gearInfo}
        <div class="det-comm-cont" style="background:#ff;color:#0083b9">
            <header class="det-comm-pf">
                <label for="gids{$gearInfo['gearId']}" style="float:left;width:90%;height:20px;overflow:hidden;">
                    <img src="/static/images/ic_draft-box_nor.png" class="choose" data-gid="{$gearInfo['gearId']}">
                    {$gearInfo['name']}
                </label>
                <label style="float:right;width:10%"><button class="del_gid" data-gid="{$gearInfo['gearId']}"></button></label>
            </header>
        </div>
        {/loop}
    </section>
</section>
{/if}
<div class="none" style="margin:50% 0 30px 0;text-align:center;color:#666;display:{if $gearInfos}none{else}{/if};">还未添加需要对比的装备！</div>
<div class="fx-comm-btn" style="box-shadow:none;border-top:solid 1px #ccc;background:#fff">
    <div class="det-comm-cont" style="border:none;text-align:center;">
        <button id="compare" style="margin-left:12%;padding:10px;font-size:18px;border:none;background:#fff;color:#0083b9"{if !$gearInfos} disabled="disabled"{/if}>开始对比</button>
        <button id="compare_clear" style="padding:12px 10px 10px 10px;font-size:14px;border:none;background:#fff;color:#999;float:right"{if !$gearInfos} disabled="disabled"{/if}>清空</button>
    </div>
</div>
<script src="/static/js/show/zepto.min.js"></script>
<script src="/static/js/show/touch.js"></script>
<script src="/static/js/run_main.js"></script>
<script src="/static/lightbox2/js/lightbox-plus-jquery.min.js"></script>
<script src="/static/toastr/toastr.min.js"></script>
<script>
// 对比
$('#compare').on('click', function(){
    var gids = $('#gids').val();
    gids = gids.split(',');

    if(gids.length == 2) {
        $('#gids').val('');
        window.location = '/show/gearCompare?gids=' + gids.toString();
    }
    else
    {
        toastr['info']('请选择两个装备进行对比！');
    }
});
// 删除对比装备ID
$('.del_gid').one('click', function(){
    var gid = $(this).attr('data-gid');
    var cids = getCookie('joggers_gear_cids');
    var tcids = ',' + cids + ',';

    if(tcids.indexOf(',' + gid + ',') !== -1) {
        var cs = cids.split(',');
        cs.remove(gid);
        setCookie('joggers_gear_cids', cs.toString(), '100d');
        if(cs.length < 1) {
            $('.none').show();
        }
    }
    $(this).parent().parent().parent().remove();
});
// 清空
$('#compare_clear').one('click', function(){
    var cids = getCookie('joggers_gear_cids');

    if(cids) {
        setCookie('joggers_gear_cids', '', '0d');
    }
    $('.det-container').remove();
    $('.none').show();
});

$('.choose').on('click', function(){
    var chooseImg = '/static/images/ic_draft-box_press.png';
    var unchooseImg = '/static/images/ic_draft-box_nor.png';
    var oldImg = $(this).attr('src');

    var set = false;
    var gids = $('#gids').val();
    var gid = $(this).attr('data-gid');

    if(gid.length > 0 && gids.length > 0) {
        gids = gids.split(',');
        if(gids.indexOf(gid) !== -1) {
            gids.remove(gid);
        } else {
            gids.push(gid);
            set = true;
        }
    } else {
        gids = [gid];
        set = true;
    }

    $('#gids').val(gids.toString());
    $(this).attr({'src': oldImg == unchooseImg ? chooseImg : unchooseImg});

    console.log($('#gids').val());
});
</script>

</body>
{template 'show/web-footer'}